<template>
<ul class="page-list-mod">
	<router-link class="page-list-item" v-for='item in data' :to='item.url'>
		<van-icon class="page-icon-l" :name="item.lIcon" />
		<div class="page-msg-l">{{item.lMsg}}</div>
		<div class="page-msg-r" :style='item.rStyle'>{{item.rMsg}}</div>
		<van-icon class="page-icon-r" :name="item.rIcon" />
	</router-link>
</ul>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
defineProps({
	data: {
		type: Array,
		required: true,
	}
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page-list-mod{ background-color: #FFF; margin-top: 0.1rem;}
.page-list-mod .page-list-item{ position: relative; display: flex; height: 0.4rem; line-height: 0.4rem; padding: 0 0.1rem; white-space: nowrap;}
.page-list-mod .page-list-item:after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #f8f8f8; }
.page-list-mod .page-msg-l{ flex: 1; text-align: left; font-size: 14px; color: #333;}
.page-list-mod .page-msg-r{ flex: 1; text-align: right; font-size: 12px; color: #666;}
.page-list-mod .page-icon-l{ display: block; width: 0.2rem; line-height: 0.4rem; font-size: 0.2rem; text-align: left; margin-right: 0.05rem; color: #973800;}
.page-list-mod .page-icon-r{ width: 0.12rem; line-height: 0.4rem; text-align: right; font-size: 12px; margin-left: 0.05rem; color: #666;}
</style>
